<template>
    <van-nav-bar title="商品详情" left-text="" left-arrow @click-left="goBack" @click-right="showShare = true">
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
    </van-nav-bar>
    <!-- 分享面板 -->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
    <div class="clear"></div>
    <div class="aui-m-slider">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="(item, index) in info.thumb_list" :key="index">
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="clear"></div>
    <div class="detailbox">
        <h4>{{ info.name }}</h4>
        <div class="price">
            <em>￥</em>{{ info.price }}<font>库存{{ info.stock }}件</font>
        </div>
    </div>
    <div class="clear"></div>
    <div class="allkbox"></div>
    <div class="clear"></div>
    <div class="detailbox_2">
        <van-tabs type="card" color="#32806f">
            <van-tab title="产品参数">
                <div class="tit" v-html="info.content"></div>
            </van-tab>
            <van-tab title="商品评价">
                <div class="pf">
                    <div class="ms">
                        <p>与描述相符</p>
                        <h2>4.5</h2>
                    </div>
                    <div class="pj">
                        <van-rate v-model="value" icon="fire" void-icon="fire-o" readonly />
                    </div>
                </div>
                <div class="nr">
                    <div class="nrs" v-for="(item, index) in commentlist" :key="index">
                        <div class="left">
                            <div class="L">
                                <img :src="LoginUser.avatar" alt="">
                            </div>
                            <div class="C">
                                <div class="tit">{{ LoginUser.nickname }}</div>
                            </div>
                        </div>
                        <div class="right">
                            <h3>{{ item.comment }}</h3>
                            <div class="tp" v-if="item.proimg">
                                <van-image width="50px" height="50px" it="cover"
                                    v-for="(src, index) in item.proimg_list" :key="index" style="margin-right: 10px;"
                                    :src="src" @click="showImagePreview(item.proimg_list)" />
                            </div>
                            <div class="sub">{{ item.updatetime }}</div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="footerbox">
        <van-action-bar>
            <van-action-bar-icon icon="chat-o" text="客服" to="/product/mind" />
            <van-action-bar-icon icon="cart-o" text="购物车" :badge="info.count" @click="goCartPage" />
            <van-action-bar-button type="warning" text="加入购物车" @click="toAddCart" />
            <van-action-bar-button type="danger" text="立即购买" @click="toAddconfirm" />
        </van-action-bar>
    </div>
</template>
<script setup>
import { showImagePreview } from 'vant';
const goBack = () => {
    history.back();
};
const route = useRoute();
const router = useRouter();
const proid = ref(route.query.proid ?? 0);

const showShare = ref(false);
const { cookies } = useCookies();
const LoginUser = reactive(cookies.get("LoginUser") ?? {});
const options = [
    [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
    ],
    [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
    ],
];
const info = ref({})
const commentlist = ref({})
onBeforeMount(() => {
    getInfoData();
    getCommentData();
});
const getInfoData = async () => {
    let result = await Api.productInfo({
        proid: proid.value,
        busid: LoginUser.id ?? 0//登陆用户id
    });
    if (result.code == 1) {
        info.value = result.data
    }
};
//购物车
const toAddCart = async () => {
    // 判断是否登陆
    if (JSON.stringify(LoginUser) == '{}') {
        showFailToast({
            message: '请先去登陆',//提示信息
            // 提示框关闭事件
            onClose: function () {//onClose事件 跳转
                router.push("/business/base/index");
            },
        });
        return false;//停止继续执行
    }
    // 添加购物车
    let result = await Api.cartAdd({
        proid: proid.value,//传入商品id
        busid: LoginUser.id ?? 0//传入用户id
    });
    // 判断
    if (result.code == 1) {
        getInfoData();//刷新数据
        // 提示
        showConfirmDialog({
            title: "购物车",
            message: "确认是否跳转到购物车",
        })
            .then(() => {
                goCartPage()//跳转
            })
            .catch(() => { });
    } else {
        showFailToast(result.msg);//错误提示
    }
}
//跳转购物车
const goCartPage = () => {
    router.push("/product/cart");
}

const toAddconfirm = async () => {
    showConfirmDialog({
        // title: "购物车",
        message: "确认是否购买",
    })
        .then(() => {

            router.push({
                path: "/product/buy",
                query: {
                    proid: proid.value,
                },
            })
        })
        .catch(() => { });
}
//商品评价

const value = ref(4.5);
const getCommentData = async () => {
    let result = await Api.orderComment({
        proid: proid.value,
        busid: LoginUser.id ?? 0
    });
    if (result.code == 1) {
        commentlist.value = result.data
    }
}
</script>
<style>
@import url('/public/assets/css/infos');
</style>

<style>
.van-nav-bar {
    background: rgb(50, 128, 111);
}
.van-nav-bar__title{
    color: white;
}
.van-nav-bar .van-icon{
    color: white
}
.tit p{
    width: 350px;
}
</style>